/* 设置全局字体和背景颜色 */
body {
    font-family: Arial, sans-serif; /* 使用 Arial 字体，如果不可用则使用 sans-serif 作为备用 */
    background-color: #f0f0f0; /* 设置页面背景为浅灰色 */
    margin: 0; /* 移除默认的外边距 */
    padding: 0; /* 移除默认的内边距 */
}

/* 设置容器的样式 */
.container {
    width: 70%; /* 容器宽度为页面宽度的 70% */
    margin: 50px auto; /* 上下边距为 50px，左右自动居中 */
    padding: 20px; /* 内边距为 20px */
    background-color: #fff; /* 容器背景为白色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加轻微的阴影效果 */
}

/* 设置标题样式 */
h2 {
    text-align: center; /* 标题居中 */
    color: #333; /* 标题颜色为深灰色 */
}

/* 设置表单组的样式 */
.form-group {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 20px; /* 每个表单组之间添加 20px 的下边距 */
}

/* 设置标签样式 */
label {
    flex: 0 0 150px; /* 标签宽度固定为 150px，不伸缩 */
    margin-right: 10px; /* 标签与输入框之间添加 10px 的右边距 */
    color: #333; /* 标签颜色为深灰色 */
    text-align: right; /* 标签文本右对齐 */
}

/* 设置输入框样式 */
.form-control {
    flex: 1; /* 输入框占据剩余空间 */
    padding: 10px; /* 输入框内边距为 10px */
    border: 1px solid #ccc; /* 输入框边框为 1px 的浅灰色 */
    border-radius: 4px; /* 输入框边框圆角为 4px */
}

/* 设置错误提示文本样式 */
.help-block {
    color: red; /* 错误提示文本颜色为红色 */
    font-size: 0.9em; /* 错误提示文本字体大小为 0.9em */
    margin-left: 160px; /* 错误提示文本与标签对齐 */
}

/* 设置复选框/单选框组的样式 */
.form-check {
    margin-bottom: 10px; /* 每个复选框/单选框组之间添加 10px 的下边距 */
}

/* 设置性别和婚姻状况选项组的样式 */
.gender-group, .married-group {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    margin-bottom: 10px; /* 添加 10px 的下边距 */
}

/* 设置性别和婚姻状况选项组中标签的样式 */
.gender-group label, .married-group label {
    margin-right: 10px; /* 标签与输入框之间添加 10px 的右边距 */
}

/* 设置按钮样式 */
.btn {
    width: 100%; /* 按钮宽度为 100% */
    padding: 10px; /* 按钮内边距为 10px */
    background-color: #007bff; /* 按钮背景颜色为蓝色 */
    color: #fff; /* 按钮文字颜色为白色 */
    border: none; /* 移除按钮边框 */
    border-radius: 4px; /* 按钮边框圆角为 4px */
    cursor: pointer; /* 鼠标悬停时显示手型指针 */
}

/* 设置按钮悬停时的样式 */
.btn:hover {
    background-color: #0056b3; /* 按钮背景颜色变为深蓝色 */
}

/* 设置警告框的通用样式 */
.alert {
    margin-top: 20px; /* 警告框与上方内容之间添加 20px 的上边距 */
    padding: 10px; /* 警告框内边距为 10px */
    border-radius: 4px; /* 警告框边框圆角为 4px */
}

/* 设置成功提示框的样式 */
.alert-success {
    background-color: #d4edda; /* 背景颜色为浅绿色 */
    color: #155724; /* 文字颜色为深绿色 */
    border: 1px solid #c3e6cb; /* 边框颜色为浅绿色 */
}

/* 设置错误提示框的样式 */
.alert-danger {
    background-color: #f8d7da; /* 背景颜色为浅红色 */
    color: #721c24; /* 文字颜色为深红色 */
    border: 1px solid #f5c6cb; /* 边框颜色为浅红色 */
}